<template>
  <view :class="['home', themeClass]">
    <view class="search">
      <view class="set" @click="returnToTheSuperior">
        <image :src="back" />
      </view>
      <view class="title">
        <input type="text" class="input" placeholder="请输入关键词搜索" @confirm="searchImgs" v-model="words">
      </view>
      <view class="icon">
        <button type="primary" size="mini" @click="searchImgs">搜索</button>
      </view>
    </view>
    <view class="body">
      <ImgList @scrolltolower="scrolltolowerEvent" v-if="imgList.length != 0" @refreshEvent="refreshEvent"
        :imgList="imgList" :pull="false" class="imgList">
      </ImgList>
      <view class="record" v-else>
        <view class="record-title">
          <text>搜索记录</text>
          <text @click="clearRecord">清空</text>
        </view>
        <view class="record-none" v-if="searchRecord.length == 0">~~ 还没有搜索记录 ~~</view>
        <view class="record-list">
          <view class="record-item" v-for="item in searchRecord" :key="item" @longpress="deleteRecord(item)"
            @click="searchRecordItem(item)">
            {{ item }}
          </view>
        </view>
      </view>
      <Loading v-show='loading' class="loadMore"></Loading>
    </view>
  </view>
</template>
<script setup lang="ts">
import { useTheme } from '@/hooks/useTheme'
const { themeClass } = useTheme()
import { onLoad } from '@dcloudio/uni-app'
import back from '@/static/images/back.png'
import { getSetu } from '@/services/home'
import { ref } from 'vue'
import { useImgInfoStore } from '@/stores/index'
import { storeToRefs } from 'pinia'
const imgInfoStore = useImgInfoStore()
const { pixivType, searchRecord } = storeToRefs(imgInfoStore)
type ImgList = {
  small: string
  src: string
  tag: string
}
const imgList = ref<ImgList[]>([])
const limit = ref(30)
const words = ref('')
const loading = ref(false)
const getData = async () => {
  loading.value = true
  try {
    const res = await getSetu({
      num: limit.value,
      r18: pixivType.value,
      replace_url: "https://i.pixiv.re",
      tags: [words.value],
      random: Math.random()
    })
    loading.value = false
    if (res.data.length == 0) return
    for (let i = 0; i < res.data.length; i++) {
      // 根据 src 判断是否已经存在
      if (imgList.value.some((item) => item.src === res.data[i].urls.original)) continue
      imgList.value.push({
        small: res.data[i].urls.large,
        src: res.data[i].urls.original,
        tag: res.data[i].tags.join(' ')
      })
    }
  } catch (error) {
    loading.value = false
  }
}
const scrolltolowerEvent = () => {
  if (loading.value) return
  getData()
}
const refreshEvent = () => {
  imgList.value = []
  getData()
}
const returnToTheSuperior = () => {
  uni.navigateBack()
}
const searchImgs = () => {
  imgList.value = []
  imgInfoStore.addRecord(words.value)
  getData()
}
const searchRecordItem = (item: string) => {
  words.value = item
  getData()
}
const deleteRecord = (item: string) => {
  uni.showModal({
    title: '提示',
    content: '确定删除该记录吗？',
    success: (res) => {
      if (res.confirm) {
        imgInfoStore.deleteRecord(item)
      }
    }
  })
}
const clearRecord = () => {
  uni.showModal({
    title: '提示',
    content: '确定清空搜索记录吗？',
    success: (res) => {
      if (res.confirm) {
        imgInfoStore.clearRecord()
      }
    }
  })
}
onLoad(() => { })
</script>
<style scoped lang="scss">
.home {
  padding-top: var(--status-bar-height);
  height: 100vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;

  .search {
    padding: 10rpx;
    display: grid;
    gap: 5px;
    grid-template-columns: 60rpx 1fr 130rpx;

    .set,
    .icon {
      display: flex;
      justify-content: center;
      align-items: center;

      image {
        height: 60rpx;
        width: 60rpx;
      }
    }

    .title {
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: bold;

      .input {
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        background-color: #8c91943f;
        padding: 0 30rpx;
        border-radius: 20px;
        font-size: 15px;
        font-weight: 400;
      }
    }
  }

  .body {
    flex: 1;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    .imgList {
      flex: 1;
    }

    .loadMore {
      left: 50%;
      transform: translateX(-50%);
      bottom: 20rpx;
      position: absolute;
    }

    .record {
      width: 100%;
      max-height: 80%;
      position: absolute;
      top: 0px;
      padding: 10px;
      display: flex;
      flex-direction: column;

      .record-title {
        display: flex;
        justify-content: space-between;
        font-weight: bold;
        font-size: 15px;
      }

      .record-none {
        text-align: center;
        margin: 30px 0;
        font-size: 14px;
      }

      .record-list {
        margin: 10px 0;
        padding: 20rpx;
        display: flex;
        flex-wrap: wrap;
        gap: 20rpx;
        flex: 1;
        overflow-y: auto;

        .record-item {
          padding: 5rpx 20rpx;
          border-radius: 20rpx;
          background-color: #8c91943f;
          font-size: 15px;
          font-weight: 400;
          display: flex;
          justify-content: center;
          align-items: center
        }
      }
    }
  }
}
</style>
